import React from 'react'
import "./Modal.css"
import ReactDOM from "react-dom"
//1.使用portal将组件的内容传送到页面中的任意一个元素中,要脱离root元素

//2.封建组件的逻辑

//3.需要一个属性visible 控制组件的显示和隐藏 两个按钮触发的事件 一个是onOk 另一个是onCancel 一个传递标题的属性title

//4.通过组合的形式 将组件中间的内容分发到组件结构中

class Modal extends React.Component {
    constructor() {
        super()
        this.state = {
            isHandleClose: false,
            visible: false
        };
        //创建一个容器
        this.modalRoot = document.createElement("div")
        this.modalRoot.id = "modal-root"
    }
    //从props中衍生出一个状态
    static getDerivedStateFromProps(nextProps, nextState) {
        //这里没有办法获得this
        // console.log(nextProps)
        //判断是否点击了close按钮,如果点击了,就return一个状态把visible变成false
        console.log("===props", nextProps)
        console.log("===stste", nextState)
        
        //如果点了 就把state的visible改成false
        if (nextState.isHandleClose) {
            return {
                visible: false,
                //利用开关思维,将这个开关初始化关闭
                isHandleClose:false
            }
        }
        //当没有点击的时候 直接让本组件的visible状态从porps进行衍生
        return { visible: nextProps.visible }
    }
    //点击叉叉的时候触发的事件回调
    handleClose = () => {
        this.setState({
            isHandleClose: true
            // visible: false
        })
    }
    componentDidMount() {//组件加载的时候 将元素添加到body中
        document.body.appendChild(this.modalRoot)
    }
    compomentWillUnmount() {//组件卸载的时候 把元素移除
        document.body.removeChild(this.modalRoot)
    }
    render() {
        //接收传递下来的属性
        let { onOk, onCancel, title, children } = this.props
        let { visible } = this.state;
        console.log(visible)
        let el = (
            <div className="modal-container">
                <div className="modal-mask">
                    <div className="modal-content">
                        <button onClick={this.handleClose} className="close">×</button>
                        <div className="header">
                            {title ? title : <h3>提示</h3>}
                        </div>
                        <div className="body">
                            {children ? children : <h4>您确定要做这个操作嘛?</h4>}
                        </div>
                        <div className="footer">
                            <button onClick={onCancel} className="cancel">取消</button>
                            <button onClick={onOk} className="confirm">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        )

        return visible ? ReactDOM.createPortal(el, this.modalRoot) : null
    }
}
export default Modal